<!--  -->
<template>
<div>
    <el-table
      :data="tableData"
      style="width: 80%"
      >
      <el-table-column
        prop="Bid"
        label="图书序列号"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="BookName"
        label="图书名称"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="BookAuthor"
        label="图书作者"
        width="180"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="BookLocation"
        label="书籍地址"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="BooksSum"
        align="center"
        label="当前库存">
      </el-table-column>
      <el-table-column
        prop="ApplySum"
        align="center"
        label="已预约人数">
      </el-table-column>
    </el-table>
    <el-pagination
   background
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
    :page-count="pagecount"
    :current-page="page"
    class="fenye">
</el-pagination>
</div>
</template>

<script>
export default {
data() {
return {
  tableData:[],
    pagecount:0,
    page:1,    
}
},
// /生命周期 - 创建完成（访问当前this实例）
created() {
    this.getbooks(1)
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

},
methods:{
    getbooks(val){
        var url=`http://localhost:3000/books?page=${val}`
        // console.log(url)
        this.axios.get(url).then(res=>{
          this.tableData=res.data.results.datas
          this.page=res.data.results.page
          this.pagecount=res.data.results.pagecount
          // console.log(res)
        })
    },
    handleCurrentChange(val){
      // console.log("点击上一页或者下一页按钮",val)
      this.getbooks(val)
    }
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
    .header{
        text-align: center;
        margin: 30px;
        padding: 15px;
    }
    .conter{
        margin-left: 5%;
        position: relative;
    }
    .fenye{
        display: block;
        position: absolute;
        bottom: 0;
        margin-left: 33%;
    }
</style>